import React from "react";
import Chart from "echarts-for-react";
import style from "./TrendEcharts.less";


class TrendEcharts extends React.Component {
    componentDidMount () {
        console.log(Chart)
       
    }
    
  
    
    setOption  = () => {
        return  {
    
            tooltip: {
                trigger: 'axis'
            },
           
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show:true,
                        title:'导出'
                    }
                }
            },
            xAxis: {
                type: 'category',
                // name: 'shi',
                axisTick: {
                    alignWithLabel: true
                },
                // nameLocation:'bottom',
                splitLine: {show: false},
                data:this.props.TrendTu == null? []:this.props.timeList1
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
            yAxis: [{
                type: 'value',
                name:this.props.TrendTu == null?'暂无':this.props.TrendTu.valueOne.unit
            },
            {
                type: 'value',
                name:this.props.TrendTu == null?'暂无':this.props.TrendTu.valueTwo.unit
            }],
            
            series: [
                {
                    name:this.props.TrendTu == null?'暂无':this.props.TrendTu.valueOne.name,
                    type:'line',
                    stack: '总量',
                  
                    data:this.props.TrendTu == null ? [120, 132, 101, 134, 90, 230, 210]:this.props.TrendTu.valueOne.data,
                    yAxisIndex:0
                },
                {
                    name:this.props.TrendTu == null?'暂无':this.props.TrendTu.valueTwo.name,
                    type:'line',
                    stack: '总量',
                   
                    data:this.props.TrendTu == null ? [220, 182, 191, 234, 290, 330, 310]:this.props.TrendTu.valueTwo.data,
                    yAxisIndex:1
                }
            ]
        }

        

    }

    render() {
        console.log(this.props)
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}
                
                 />
          

         
           
          );
    }
   
}

export default TrendEcharts;
